<template>
    <div class="minbox" v-if="isshow">
        <van-nav-bar  title="预约邀请" right-text="新建" left-arrow @click-right="addMsg.isshow = !addMsg.isshow"  @click-left="msgBoxGoBack"/>
        <div class="listbox">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="show">
                    <p class="title">{{item.title}}</p>
                    <span class="openmore" @click="setlistopen(index+1)">展开<van-icon name="arrow" /></span>
                </div>
                <div class="hidden" :class="{open:index + 1 == listopen}">
                    <div class="li"><span class="name">发送内容：</span>{{item.content}}</div>
                    <div class="li"><span class="name">创建时间：</span>{{item.create_time}}</div>
                    <div class="li"><span class="name">发送时间：</span>{{item.send_time}}</div>
                    <div class="li"><span class="name">发送状态：</span><b>{{item.send_status==1?'等待发送':item.send_status == 2?'发送成功':'取消发送'}}</b></div>
                </div>
            </div>
        </div>

        <van-popup v-model="addMsg.isshow" class="addmsg">
            <p class="title">添加新的预约消息</p>
            <van-cell-group label="标题">
                <van-field v-model="addMsg.data.title" label="标题" />
                <van-field v-model="addMsg.data.content" label="内容" type="textarea" required />
                <van-field @click.native="selectDate = true;" :value="addMsg.data.send_time | formatDate" readonly label="发送时间" required />
            </van-cell-group>
            <van-button @click="sendSaveMsg" :loading="isloading" class="button" size="large" type="primary">保存</van-button>
        </van-popup>
        <van-popup v-model="selectDate" position="bottom" :overlay="true">
            <van-datetime-picker :min-date="new Date()"  v-model="currentDate"  type="datetime" @cancel="currentDate=''" @confirm="endTimeSet"/>
        </van-popup>
    </div>
</template>
<script>
  export default {
      data:function(){
          return {
              currentDate:'',
              selectDate:false,
              isloading:false,
              listopen:1,
              addMsg:{
                  isshow:false,
                  data:{}
              },
              list:[]
          }
      },
      props: ['isshow'],
      watch:{
          isshow:function(){
              var that = this;
              if(!this.isshow) return;
              this.refreshList();
          },

      },
      updated () {
          
      },
      methods:{
        refreshList:function(){
            var that = this;
            $.post(this.URL.server+'/api/Customer_service/bespeakList',{
                cs_id:$vm.MsgBox.cs_user.id,
                openid:$vm.MsgBox.msg_user.openid
            },function(res){
                console.log(res);
                if(res.status == 1){
                    that.list = res.data
                    console.log(that);
                }
            })
        },
        setlistopen:function(index){
            if(this.listopen == index ){
                this.listopen = 0;
                return;
            }
            this.listopen = index
        },
        msgBoxGoBack:function(){
            this.$router.back(-1);
        },
        endTimeSet:function(time){
            time = Date.parse(time)/1000;
            this.addMsg.data.send_time = time;
            this.selectDate = false;
        },
        sendSaveMsg:function(){
            var that = this;
            that.isloading = false;
            console.log(this.addMsg.data);
            this.addMsg.data.cs_id = $vm.MsgBox.cs_user.id;
            this.addMsg.data.openid = $vm.MsgBox.msg_user.openid;
            this.addMsg.data.type = 1;

            $.post(this.URL.server+'/api/Customer_service/saveBespeak',this.addMsg.data,function(res){
                that.isloading = false;
                that.addMsg.isshow = false;
                if(res.status == 1){
                    that.$socket.emit('save_booking',{
                        id:res.id,
                        send_time:that.addMsg.data.send_time
                    });
                    that.refreshList();
                    that.$toast('预约成功！');
                    return
                }else{
                    that.$toast('保存失败请重试！');
                }
                
            });
        }
      }
  };
</script>
<style lang="less" scoped>
    @keyframes show-in {
        from { transform: translateY(100%);}
        50%  { transform: translateY(50%);}
        to   { transform: translateY(0%);}
    }
    @keyframes show-out {
        from { transform: translateY(0%);}
        50%  { transform: translateY(50%);}
        to   { transform: translateY(100%);}
    }
    .addmsg{
        padding:10px;width:70%;
        .title{
            margin:0;text-align: center;margin-bottom: 10px;color:#444;       
        }
        .button{
            height:30px;line-height: 30px;font-size: 14px;margin-top: 10px;
        }
    }
    .minbox{
        position: fixed;top:40px;bottom:0;left:0;width:100%;z-index: 999;background:#fff;animation: show-in 0.3s linear 1;display: inline-block;
        .out{
            animation: show-out 0.3s linear 1;
        }
        .listbox{
            position: absolute;top:46px;bottom:0;overflow: hidden;overflow-y: auto;width:100%;
            .item{
                margin:5px;border-radius: 5px;background:#c8c8fd;padding:5px;
                .show{
                    border-bottom: 1px solid #dcd7f3;
                    .title{
                        margin:0;width:calc(100% - 60px);line-height: 25px;font-size: 16px;padding:0 10px;float:left;
                        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
                    }
                    .openmore{
                        display: block;width:40px;text-align: right;font-size: 12px;line-height: 25px;float:right;cursor: pointer;
                        i{
                            position: relative;top:1px;transform: scale(0.8);font-weight: 600;
                        }
                    }
                    &::after{
                        content:'';display:block;clear: both;
                    }
                }
                .hidden{
                    padding:0px 10px;font-size: 16px;height:0;overflow: hidden; transition: all 0.2s;
                    &.open{
                        height:84px;
                    }
                }
            }
        }
    }
</style>